<template>
    <div>
        <el-table
                :show-summary="isShowSum"
                :data="tableData"
                :height="height"
                style="width: 100%"
                :header-cell-style="{
        background: '#eff2f6',
        color: 'rgba(0, 0, 0, 0.85)',
        fontSize: '14px',
        'text-align': alignType,
      }"
        >
            <el-table-column
                    v-if="isShowBox"
                    type="selection"
                    width="55"
                    align="center"
            >
            </el-table-column>
            <template>
                <column-item
                        v-for="item in col"
                        :key="item.label"
                        :col="item"
                ></column-item>
            </template>
            <template #empty>
                <div class="empty" style="height:200px;">
                    <!--<img-->
                            <!--class="empty-img"-->
                            <!--style="margin:30px auto;height:102px;width:134px;"-->
                            <!--src=""-->
                            <!--alt-->
                    <!--/>-->
                    <span class="empty-desc">暂无数据</span>
                </div>
            </template>
        </el-table>
    </div>
</template>
<script>
    import ColumnItem from "./columnItem";
    export default {
        name: "TableItem",
        components: {
            ColumnItem,
        },
        props: {
            //表格数据
            tableData: {
                type: Array,
                default: () => [],
            },
            //树型结构表头数据
            col: {
                type: Array,
                default: () => [],
            },
            //是否在表格下方显示合计
            isShowSum: {
                type: Boolean,
                default: false,
            },
            //判断单元格文字是居中还是左对齐显示,默认居中
            alignType: {
                type: String,
                default: "center",
            },
            //设置表格高度,固定表头
            height: {
                type: String,
                default: null,//默认不固定表头
            },
            //判断是否显示多选框
            isShowBox: {
                type: Boolean,
                default: false,//默认不展示
            },
        },
        data() {
            return {};
        },
        created() {},
        methods: {},
    };
</script>
<style>
    /* 处理表格表头和内容错位问题 */
    .el-table th.gutter {
        display: table-cell !important;
    }
    .el-table th,
    .el-table td {
        padding: 7px 0 !important;
    }
</style>

